<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
  <div class="content">
    
   

    <ul class="girls" id="girls">
        <!-- <li class="girl">测试</li> -->
    </ul>
 


 </div> 



   <script>
   


//获取url传来的index
var str = location.search;

var index = str.substring(str.indexOf("=")+1)


const imglist = new Array();

var url = "img.json"
// 申明一个XMLHttpRequest
var request = new XMLHttpRequest();
// 设置请求方法与路径
request.open("get", url);
// 不发送数据到服务器
request.send(null);
//XHR对象获取到返回信息后执行
request.onload = function () {
    // 解析获取到的数据
    var data = JSON.parse(request.responseText);
     
   
   

//获取imglist中对应的图片src
 
var item =  data[index]
 


//获取item中的数组
  var list = item.list;

  var ul = document.getElementById("girls");
  

 for(let i=0;i<list.length;i++){

  var src = list[i]

  //console.log(src);
   console.log(src);
   //写入
  ul.innerHTML = ul.innerHTML + "<li class='girl'><img class='girlimg'  src="+ src +"></li>"
      
   
  
 }


}


   </script>

   <style>
   
 
   li{
    list-style: none;
   }
   img{
    width: 300px;
    height: 400px;
   }
   .girl{
        float: left;
    }

   </style>


</body>
</html>